<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="${basePath}static/bootstrap-3.3.7/dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css"
	href="${basePath}static/bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link
	href="${basePath}static/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css"
	href="${basePath}static/paginationjs-master-2.1.0/dist/pagination.css" />
<script src="${basePath}static/js/jquery-1.12.4.min.js" type="text/javascript"
	charset="utf-8"></script>
<script type="text/javascript"
	src="${basePath}static/paginationjs-master-2.1.0/dist/pagination.min.js"></script>
<script src="${basePath}static/bootstrap-3.3.7/dist/js/bootstrap.min.js"
	type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	function dojquery() {
		$.ajax({
			type : "post",
			url : 'QueryComment',
			data : $("#displaytbody").serialize(),
			dataType : "json",
			success : function(data) {
				// 将请求的数据放输出到div里面
				console.info(data);
				doPaging(data, 6);
			},
			error : function(data) {
				alert("请求失败" + data);
			}

		});
	}

	function doPaging(data, pagesize) {
		// 使用jquery进行ajax请求处理
		if (isNaN(pagesize) || pagesize <= 0) {
			pagesize = 5; // 默认页面大小为5条记录
		}
		$('#querypager')
				.pagination(
						{
							dataSource : data, // 分页的数据源（可以是ajax查询成功之后的json数据对象）
							pageSize : pagesize,// 每页显示的记录条数
							showGoInput : true, // 是否显示goin按钮
							showGoButton : true,
							callback : function(data, pagination) {
								console.info(data);
								var strHtml = "";
								var sereview="";
								var reply="";
								$.each(data,function(index, eachVal) {
													if (eachVal.servicereview == null) {
														sereview = "";
														reply="<td><button type='button' class='reply' data-toggle='modal' data-target='#myModal' onclick='reply(this)' >回复</button></td>"
													} else {
														sereview = eachVal.servicereview;
														eachVal.commentstate="已回复";
														reply="<td><button>不可回复</button></td>";
														
													}
													strHtml += "<tr>";

													strHtml += "<td>";
													strHtml += eachVal.userid;
													strHtml += "</td>";

													strHtml += "<td>";
													strHtml += eachVal.userreview;
													strHtml += "</td>";

													strHtml += "<td>";
													strHtml += sereview;
													strHtml += "</td>";

													strHtml += "<td>";
													strHtml += eachVal.commentstate;
													strHtml += "</td>";

													strHtml += reply;

													strHtml += "</tr>";
												});

								// 把解析的html内容，使用dom操作赋值到表格中
								$("#displaytbody").html(strHtml);
							}

						})
	}
</script>
</head>
<body onload="dojquery()">
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-7">
			<table class="table table-hover">
				<thead>
					<tr>
						<th>用户ID</th>
						<th>用户评价</th>
						<th>客服回复</th>
						<th>评论状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="displaytbody">

				</tbody>
			</table>
		</div>
		
		<!-- 分页块 -->
		<div class="col-sm-offset-2 col-sm-7">
			<div class="inner-left preview" id="querypager"></div>
		</div>
	</div>
	<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
						<h4 class="modal-title" id="myModalLabel">
					回复内容:
				</h4>
					</div>
					<!-- <form action="../ServiceComcontent" method="post" onsubmit="return ionclick();"> -->
					<div class="modal-body" style="height: 130px;">
						<textarea name="servicereview" id="servicereview" rows="5" cols="75" placeholder="请输入您的回复..." style="float: left;"></textarea>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" onclick="ionclick()">确定</button>
					</div>
					<!-- </form> -->
				</div>
			</div>
			<!-- /.modal -->
		</div>
</body>
<script type="text/javascript">
	var paramName= -1;
	function ionclick() {
		var strcomment = document.getElementById('servicereview').value;
		if (strcomment.length == 0) {
			alert('请填写评价内容');
		}else{
			okreply();
		}
	}
	
	function reply(obj){
		var $td = $(obj).parents('tr').children('td');
		paramName = $td.eq(0).text();
	}
	
	function okreply(){
		var servicereview = $("#servicereview").val();
		
		$.ajax({
			type : "post",
			url : 'ServiceComcontent',
			data : {
				"userid" : paramName,
				"servicereview" : servicereview
			},
			//dataType : "json",
			success : function(data) {
				console.info("aaaaaaa")
				 $('#myModal').map(function () {
			         if (!$(this).is(":hidden")){
			             $(this).modal('hide');
			         }
			     });
				dojquery();
			},
			error : function(data) {
				alert("请求失败" + data);
			}

		});
	}
	
	
</script>
</html>